<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算属性-函数-侦听器</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{title}} <button @click="title='我是一个标题！'">修改标题</button></h1> 
    <button @click="increment">
      {{count}}
    </button>
    <span>{{ doubleCount }}</span>
    <div>
      {{asyncDoubleCount}}
    </div>
    <pre>
      {{obj}} <button @click="handleChange">change obj</button>
    </pre>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        count: 0,
        title: '我是标题',
        aaa: 100,
        asyncDoubleCount: 0,
        obj: {
          x: 100,
          y: {
            z: 1000
          }
        }
      },
      methods: {
        increment() {
          this.count = this.count
        },
        // doubleCount() {
        //   console.log('doubleCount')
        //   return this.count * 2
        // }
        // aaa() {

        // }
        handleChange() {
          this.obj.y.z = 2000
          // this.obj = null
        }
      },
      computed: {
        // doubleCount() {
        //   console.log('doubleCount')
        //   return this.count * 2
        // }
        doubleCount: {
          get() {
            // console.log(this.title)
            if (this.count *= 2 % 2 === 0) {
              return '偶数：' + this.count
            } else {
              return '奇数：' + this.count
            }
          },
          set() {
            console.log(100)
          }
        },

        // aaa() {

        // }

        // 在计算属性里，不能做异步操作
        // asyncDoubleCount() {
        //   setTimeout(() => {
        //     return this.count * 2
        //   }, 1000)
        // }
      },

      mounted() {
        // console.log(this.doubleCount)
      },
      
      updated() {
        // this.doubleCount = 100
        // console.log(this.doubleCount)
      },

      watch: {
        count(newValue, oldValue) {
          // console.log('watch')
          console.log(this.title)
          setTimeout(() => {
            this.asyncDoubleCount = newValue * 2
          }, 1000)
        },

        obj: {
          handler(newValue) {
            console.log(newValue)
          },
          immediate: true,
          deep: true
        }
      }

    })
  </script>
</body>
</html>